<!DOCTYPE html>
<html>
<head>
    <title><%= events.name %></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="/javascripts/jquery.tokeninput.js"></script>
    <link rel="stylesheet" href="/stylesheets/token-input.css"/>
    <link rel="stylesheet" href="/stylesheets/token-input-facebook.css"/>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>


<body>
<h1>Detail of Event: <%= events.name %></h1>

<div class="alert alert-danger" id="error-box" style="display:none;"></div>

<div style="border:2px solid;border-radius:25px;box-shadow: 10px 10px 5px #888888;padding:10px;">
    <p><span class="text-info">Creator: </span> <%= events.creator.fullName %></p>

    <p><span class="text-info">Start time: </span> <%= events.startTime %></p>

    <p><span class="text-info">End time: </span> <%= events.endTime %></p>

    <p><span class="text-info">Description: </span> <%= events.description %></p>

    <p><span class="text-info">Location: </span> <%= events.location %></p>

    <div id="listUser">
        <% for (var item = 0; item < events.user.length; item++) { %>
        <div>
            <p><b>User:</b> <%= events.user[item].fullName %>
                <b>Invite Right:</b> <%= events.user[item].inviteRight %> </p>
        </div>
        <% } %>
    </div>
</div>

<div style="border:2px solid;border-radius:25px;box-shadow: 10px 10px 5px #888888;padding:10px;">
    <form method="post" enctype="multipart/form-data" action="/event/photoUpload">
        <input type="file" name="photo" accept="image/jpeg, image/png" multiple="multiple">
        <input type="submit" value="Upload">
        <input hidden="true" id="eventID" name="eventID" value="<%= events._id %>">
    </form>
</div>

</br>
<div style="border:2px solid;border-radius:25px;box-shadow: 10px 10px 5px #888888;padding:10px;">
    <form id="addUserToEvent" name="addUserToEvent" action="/event/:id" method="put">
        <p><span class="text-info">User:</span><input type="text" name="user" id="friend-token"/></p>

        <p><span class="text-info">Invite right:</span> <input type="checkbox" name="inviteRight" value="yes">Yes! You
            Can
        </p>
        <input hidden="true" id="eventID" name="eventID" value="<%= events._id %>">
        <button type="submit" class="btn btn-primary">ADD</button>
    </form>
</div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        $("#friend-token").tokenInput([
            <% for (var i = 0; i < user.friend.length; i++) { %>
            { id: "<%= user.friend[i].userId %>", name: "<%= user.friend[i].userId %>" },
            <%}%>
        ], {
            theme: "facebook"
        });

        $("#invite-token").tokenInput([
            <% for (var i = 0; i < user.friend.length; i++) { %>
            { id: "<%= user.friend[i].userId %>", name: "<%= user.friend[i].userId %>" },
            <%}%>
        ], {
            theme: "facebook"
        });

        $("#all").click(function () {
            if (!$(this).checked) {
                $("#invite-token").val("NamTH");
            }
        });

        // Ajax để load trang
        $('#addUserToEvent').submit(function (event) {
            // do the AJAX post
            event.preventDefault();
            $.ajax({
                type: 'put',
                url: $('#addUserToEvent').attr('action'),
                data: $('#addUserToEvent').serialize(),
                beforeSend: function () {

                },
                // TODO: Thêm Ajax hiện người lên kìa DCM
                success: function (status, data) {
                    $('#error-box').attr('style', 'display:none');
                    var div = document.getElementById('listUser');
                    div.innerHTML = div.innerHTML + 'Bo Sung Sau Code Ajax'
                },
                error: function (xhr, status, err) {
                    // var error = eval("("+xhr.responseText+")");
                    var $errorBox = $('#error-box');
                    $errorBox.show().html('<p>' + xhr.responseText + '</p>');
                }
            });
        });

    });
</script>